<template>
  <el-dialog
    @close="handleClose"
    title="重置密码"
    width="800px"
    v-model="visable"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="phoneForm"
      label-width="100px"
      class="form"
    >
      <el-row v-if="active == 1">
        <el-col :span="24">
          <el-form-item label="邮箱" prop="email">
            <el-input
              v-model="form.email"
              placeholder="请输入邮箱"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="验证码" prop="code">
            <el-input
              maxlength="6"
              placeholder="请输入验证码"
              v-model="form.code"
              style="width: 100%"
            >
              <template #append
                ><el-button
                  style="width: 100px"
                  link
                  :disabled="flag"
                  @click="getcode"
                  >{{ buttonText }}</el-button
                ></template
              >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="active == 2">
        <el-col :span="24">
          <el-form-item label="新密码" prop="password">
            <el-input
              type="password"
              v-model="form.password"
              auto-complete="new-password"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="密码确认" prop="confirmPwd">
            <el-input
              type="password"
              v-model="form.confirmPwd"
              auto-complete="new-password"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="width: 100%; text-align: center">
        <el-button plain @click="visable = false">取消</el-button>
        <el-button type="primary" @click="prev" v-show="active == 2"
          >上一步</el-button
        >
        <el-button type="primary" @click="findPwdByPhone" v-show="active == 2"
          >确 认</el-button
        >
        <el-button type="primary" @click="checkCode" v-show="active == 1"
          >下一步</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { ref, computed, reactive } from "vue";
import { sendEmailCode, verifyEmail, resetPassword } from "@/api/user";
import { ElMessage } from "element-plus";
const buttonText = ref("获取验证码");
const flag = ref(false);
const phoneForm = ref(null);
const props = defineProps({
  dialogFormVisible: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:dialogFormVisible"]);
const active = ref(1);
const form = reactive({
  email: "",
  code: "",
  password: "",
  confirmPwd: "",
});
const validatePassCheck = (rule, value, callback) => {
  console.log(value, rule);
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== form.password) {
    callback(new Error("两次输入密码不一致!"));
  } else {
    callback();
  }
};
const rules = reactive({
  email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
  code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
  password: [{ required: true, message: "请输入新密码", trigger: "blur" }],
  confirmPwd: [
    { required: true, message: "请再次输入密码", trigger: "blur" },
    {
      validator: validatePassCheck,
      message: "两次密码不一致",
      trigger: "blur",
    },
  ],
});
const visable = computed({
  get() {
    return props.dialogFormVisible;
  },
  set(value) {
    emit("update:dialogFormVisible", value);
  },
});

const checkCode = async (type) => {
  try {
    await phoneForm.value.validate();
    let params = {
      email: form.email,
      code: form.code,
    };
    let res = await verifyEmail(params);
    if (res.code === 0) {
      active.value++;
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    console.log(error);
  }
};
const getcode = async (type) => {
  let params = {
    email: form.email,
  };
  try {
    await phoneForm.value.validateField("email");
    let res = await sendEmailCode(params);
    console.log(res);
    if (res.code === 0) {
      countDown();
      ElMessage.success("验证码已经发送到你" + form.email + "邮箱，请注意查收");
      return;
    }
    ElMessage.error(res.msg);
  } catch (error) {
    console.log(error);
  }
};
const findPwdByPhone = async () => {
  await phoneForm.value.validate();
  let res = await resetPassword(form);
  if (res.code === 0) {
    ElMessage.success("重置密码成功");
    visable.value = false;
  } else {
    ElMessage.error(res.msg);
  }
};
const countDown = () => {
  let nums = 59;
  if (flag.value) {
    return;
  }
  buttonText.value = nums + "秒后重发";
  flag.value = true;
  let timer = setInterval(() => {
    nums--;
    if (nums > 0) {
      buttonText.value = nums + "秒后重发";
    } else {
      buttonText.value = "获取验证码";
      flag.value = false;
      clearInterval(timer);
    }
  }, 1000);
};
const handleClose = () => {};
const prev = () => {
  phoneForm.value.clearValidate();
  active.value--;
};
</script>
<style lang="scss" scoped>
:deep(.el-input-group__append) {
  background: #119645;
  color: #fff;
}
.form {
  display: flex;
  flex-direction: column;
}
</style>
